<template>
    <div>
        <h2>G6 复杂流程图</h2>
        <div ref="container" style="width:100%;height:400px;background:#f5f5f5;"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
defineOptions({ name: 'AntvG6Demo5' });
import * as G6 from '@antv/g6';
const container = ref();
onMounted(() => {
    const graph = new G6.Graph({
        container: container.value,
        width: 900,
        height: 400,
        layout: { type: 'dagre' },
        data: {
            nodes: [
                { id: 'start', label: '开始', x: 100, y: 100 },
                { id: 'step1', label: '步骤1', x: 200, y: 100 },
                { id: 'step2', label: '步骤2', x: 300, y: 100 },
                { id: 'step3', label: '步骤3', x: 400, y: 100 },
                { id: 'end', label: '结束', x: 500, y: 100 }
            ],
            edges: [
                { source: 'start', target: 'step1' },
                { source: 'step1', target: 'step2' },
                { source: 'step2', target: 'step3' },
                { source: 'step3', target: 'end' }
            ]
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],
    });
    graph.render();
});
</script> 